<template>
  <div class="main_box">
    <el-button @click="openDrawer2()">修改</el-button>
    <div class="main_box-left">
      <div class="date_picker">
        <div class="picker_box">
          <h5 class="h5_font">{{ list.i1.name }}</h5>
          <span>{{ list.i2.name }}：{{ list.m21.name }}</span>
        </div>
        <div class="time_box">
          <div class="custom-style">
            <el-segmented v-model="selectIndex" :options="selects" size="large" />
          </div>

          <div class="satisfy">
            <span class="time_title">{{ list.i3.name }}</span>
            <el-date-picker v-model="statisticalTime" :type="dateType" placeholder="选择时间" />
            <el-divider direction="vertical" />
            <span class="time_title">{{ list.i4.name }}</span>
            <el-date-picker v-model="contrastTime" :type="dateType" placeholder="选择时间" />
          </div>
        </div>
      </div>
      <div class="warning_info">
        <el-icon><SuccessFilled color="#ffa500" /></el-icon>
        <div class="text">
          <p>{{ list.i5.name }}</p>
          <p>{{ list.i6.name }}</p>
          <p>{{ list.i7.name }}</p>
        </div>
      </div>
      <div class="business_overview">
        <div class="picker_box">
          <h5 class="h5_font">{{list.i8.name}}</h5>
          <span>{{list.i9.name}} 至 {{list.i10.name}}</span>
        </div>
        <p>
          商家同行排名较对周期各指标表现较好，请到<span style="color: orange">经营诊断</span
          >，查看更多
        </p>
      </div>
      <div class="key_data">
        <h5 class="h5_font">{{list.i11.name}}</h5>
        <div class="key_data_box">
          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{list.i12.name}}</span><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i13.name }}</span
                ><span class="unit">元</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{list.i14.name}}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i15.name }}</span>
              </p>
              <p class="pm" >
                <span
                  >{{list.i16.name}}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon></span
                ><span style="margin: 0 7px">{{ list.i17.name }}</span
                >
              </p>
            </div>
          </el-card>

          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{   list.i18.name }}</span><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i19.name }}</span
                ><span class="unit">元</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{ list.i20.name }}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i21.name }}</span>
              </p>
            </div>
          </el-card>

          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{ list.i22.name }}</span><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i23.name }}</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{ list.i24.name }}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i25.name}}</span>
              </p>
              <p class="pm" >
                <span
                  >{{ list.i26.name}}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon></span
                ><span style="margin: 0 7px">{{ list.i27.name}}</span
                >
              </p>
            </div>
          </el-card>

          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{ list.i28.name}}</span><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i29.name}}</span
                ><span class="unit">元</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{ list.i30.name}}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i31.name}}</span>
              </p>
              <p class="pm">
                <span
                  >{{ list.i32.name}}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon></span
                ><span style="margin: 0 7px">{{ list.i33.name}}</span
                >
              </p>
            </div>
          </el-card>

          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{ list.i34.name}}</span><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i35.name}}</span
                ><span class="unit">元</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{ list.i36.name}}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i37.name}}</span>
              </p>
            </div>
          </el-card>

          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{ list.i38.name}}</span><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i39.name}}</span
                ><span class="unit">元</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{ list.i40.name }}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i41.name }}</span>
              </p>
            </div>
          </el-card>

          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{ list.i42.name }}</span
                ><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i43.name }}</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{ list.i44.name }}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i45.name }}</span>
              </p>
            </div>
          </el-card>

          <el-card
            class="box-card"
            :style="{ 'margin-left': commonStore.isCollapse ? '2.5%' : '3.2%' }"
          >
            <div class="data_box">
              <p class="title">
                <span>{{ list.i46.name }}</span
                ><el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
              </p>
              <p class="money">
                <span class="price">{{ list.i47.name }}</span>
              </p>
              <p class="dbzq">
                <span class="dbzq_text"
                  >{{ list.i48.name }}<el-icon><QuestionFilled color="#d3d3d3" /></el-icon>
                </span>
                <span class="db_color">{{ list.i49.name }}</span>
              </p>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="main_box-right">
      <div class="others">
        <el-space direction="vertical" size="large">
          <div class="other_item">
            <el-icon size="25px"><Service color="#666" /></el-icon>
            <span>客服</span>
          </div>
          <div class="other_item">
            <el-icon size="25px"><ChatDotSquare /></el-icon>
            <span>反馈</span>
          </div>
          <div class="other_item">
            <el-icon size="25px"><List /></el-icon>
            <span>扫码</span>
          </div>
        </el-space>
      </div>
      <div class="connect"></div>
    </div>

    <el-drawer v-model="drawerValue2" :with-header="false">
      <!-- 这个是那个词那些的 -->
      <ul class="show">
        <li v-for="(item, index) in data" :key="index">
          <div class="inputTitle" @click="changeTitleEdit(index)">
            <input type="text" v-model="item.name" v-if="item.edit" />
            <p v-else>{{ item.name }}</p>
          </div>
        </li>
      </ul>

      <!-- 这个是那个数组的 -->

      <ul class="show">
        <li v-for="(item, index) in list2" :key="index">
          <div class="inputTitle" @click="changeTitleEdit2(index)">
            <input type="text" v-model="item.name" v-if="item.edit" />
            <p v-else>{{ item.name }}</p>
          </div>
        </li>
      </ul>

      <el-button @click="onSubmit()">确认修改</el-button>
    </el-drawer>
  </div>
</template>
<script setup>
import { useCommon } from '@/stores/common'
import { SuccessFilled, QuestionFilled } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import axios from 'axios'
let commonStore = useCommon()
let shop = ref([])

// const fetchUsers = async () => {
//   try {
//     const response = await axios.post('http://localhost:8080/system/report/queryBusinessInfo');
//     shop = response.data.tbReport;
//     console.log(JSON.stringify(shop))
//   } catch (error) {
//     console.error('Axios error:', error);
//   }
// };
//
// fetchUsers();

let selects = ref(['实时', '近7天', '近30天', '按日', '按周', '按月', '自定义'])
let selectIndex = ref('按月')
let clickIndex = ref(0)
let statisticalTime = ref('')
let contrastTime = ref()

let dateType = computed(() => {
  return selectIndex.value == '按月' ? 'month' : 'date'
})

// 以下是新增的
const drawerValue2 = ref(false)

// 就两种形式，其他的都加进去就行，这是词的，往下加就行，改什么写什么,for循环了的
const list = ref({
  i1: {
    name: '经营报告',
    edit: false,
  },
  i2: {
    name: '店铺所在城市',
    edit: false,
  },
  m21:{
    name: '北京',
    edit: false,
  },
  i3: {
    name: '统计时间',
    edit: false,
  },
  i4: {
    name: '对比时间',
    edit: false,
  },
  i5: {
    name: '1、所有的交易指标（如交易金额，成交订单量...）',
    edit: false,
  },
  i6: {
    name: '2、实时数据会存在15分钟的延迟...',
    edit: false,
  },
  i7: {
    name: '3、经营分析数据仅作为日常数据分析使用',
    edit: false,
  },
  i8: {
    name: '经营概览',
    edit: false,
  },
  i9: {
    name: '2024-07-01',
    edit: false,
  },
  i10: {
    name: '2024-07-31',
    edit: false,
  },
  i11: {
    name: '核心数据',
    edit: false,
  },
  i12: {
    name: '成交金额',
    edit: false,
  },
  i13: {
    name: '10000',
    edit: false,
  },
  i14: {
    name: '较对比周期',
    edit: false,
  },
  i15: {
    name: '53.79%',
    edit: false,
  },
  i16: {
    name: '商圈同行排名',
    edit: false,
    },
  i17: {
    name: '持平',
    edit: false,
  },
  i18: {
    name: '预计收入',
    edit: false,
  },
  i19: {
    name: '1',
    edit: false,
  },
  i20: {
    name: '较对比周期',
    edit: false,
  },
  i21: {
    name: '26%',
    edit: false,
  },
  i22: {
    name: '成交订单量',
    edit: false,
  },
  i23: {
    name: '100',
    edit: false,
  },
  i24: {
    name: '较对比周期',
    edit: false,
  },
  i25: {
    name: '26%',
    edit: false,
  },
  i26: {
    name: '商圈同行排名',
    edit: false,
  },
  i27: {
    name: '持平',
    edit: false,
  },
  i28: {
    name: '退款金额',
    edit: false,
  },
  i29: {
    name: '1000',
    edit: false,
  },
  i30: {
    name: '较对比周期',
    edit: false,
  },
  i31: {
    name: '26%',
    edit: false,
  },
  i32: {
    name: '商圈同行排名',
    edit: false,
  },
  i33: {
    name: '1 持平',
    edit: false,
  },
  i34: {
    name: '商家补贴金额1',
    edit: false,
  },
  i35: {
    name: '2000',
    edit: false,
  },
  i36: {
    name: '较对比周期',
    edit: false,
  },
  i37: {
    name: '26%',
    edit: false,
  },
  i38: {
    name: '商家补贴金额2',
    edit: false,
  },
  i39: {
    name: '3000',
    edit: false,
  },
  i40: {
    name: '较对比周期',
    edit: false,
  },
  i41: {
    name: '26%',
    edit: false,
  },
  i42: {
    name: '退款订单量(全部退款+部分退款)1',
    edit: false,
  },
  i43: {
    name: '100',
    edit: false,
  },
  i44: {
    name: '较对比周期',
    edit: false,
  },
  i45: {
    name: '26%',
    edit: false,
  },
  i46: {
    name: '退款订单量(全部退款)',
    edit: false,
  },
  i47: {
    name: '100',
    edit: false,
  },
  i48: {
    name: '较对比周期',
    edit: false,
  },
  i49: {
    name: '26%',
    edit: false,
  },
})

let data = ref([]) //修改时保存数据

// 打开弹窗
const openDrawer2 = () => {
  drawerValue2.value = true
  data.value = []
  data.value = JSON.parse(JSON.stringify(list.value))
}

// 点击更换文本和输入框,双向绑定，值也被修改
const changeTitleEdit = (index) => {
  data.value[index].edit = true
}

// 这是数组的，
const list2 = ref({
  0: {
    name: '实时',
    edit: false,
  },
  1: {
    name: '近7天',
    edit: false,
  },
  2: {
    name: '近30天',
    edit: false,
  },
  3: {
    name: '按日',
    edit: false,
  },
  4: {
    name: '按周',
    edit: false,
  },
  5: {
    name: '按月',
    edit: false,
  },
  6: {
    name: '自定义',
    edit: false,
  },
})

// 这是数组的
const changeTitleEdit2 = (index) => {
  list2.value[index].edit = true
}

// 提交后重置状态
const onSubmit = () => {
  drawerValue2.value = false
  for (const key in data.value) {
    if (Object.prototype.hasOwnProperty.call(data.value, key)) {
      const element = data.value[key]
      element.edit = false
    }
  }
  list.value = []
  list.value = JSON.parse(JSON.stringify(data.value))

  // 将状态重置，然后修改数组的值
  selects.value = []
  for (const key in list2.value) {
    if (Object.prototype.hasOwnProperty.call(list2.value, key)) {
      const element = list2.value[key]
      element.edit = false
      selects.value.push(element.name)
    }
  }
}
</script>
<style lang="scss" scoped>
.main_box {
  height: calc(100% - 60px);
  display: flex;
  justify-content: space-between;
  background-color: #eee;
  .main_box-left {
    width: 94%;
    margin: 10px;
    overflow-y: scroll;

    .date_picker {
      height: 130px;
      background-color: white;
      margin-bottom: 20px;
      padding: 20px;

      .time_box {
        display: flex;
        align-items: center;

        .custom-style .el-segmented {
          --el-segmented-item-selected-color: white;
          --el-segmented-item-selected-bg-color: black;
        }
        .el-segmented--large .el-segmented__item {
          border: 1px solid rgba(#ededed, 0.5) !important;
        }
      }
      .satisfy {
        margin-left: 20px;
        ::v-deep .el-date-editor {
          margin-left: 20px;
        }
      }

      .time_btn {
        border: 1px solid #ededed;
        padding: 7px 20px;

        &:hover {
          cursor: pointer;
          background-color: black;
          color: white;
        }
      }
      .is_active {
        background-color: black;
        color: white;
      }
    }
    .warning_info {
      height: 90px;
      background-color: rgb(255, 230, 222);
      display: flex;
      padding: 10px 20px;
      .el-icon {
        margin-top: 5px;
      }

      .text {
        margin-left: 10px;
      }
    }
    .business_overview {
      padding: 20px;
      height: 130px;
      background-color: white;
      margin-top: 20px;
      background-color: rgb(255 205 3 / 13%);
      p {
        margin-left: 50px;
      }
    }
    .key_data {
      padding: 20px;
      background-color: white;
      margin-top: 20px;
      min-height: calc(100% - 260px - 90px - 30px);

      .key_data_box {
        display: flex;
        flex-wrap: wrap;

        .el-card {
          width: 21%;
          height: 200px;
          padding: 12px 25px;
          margin-bottom: 30px;
        }
        .is_active {
          border: 1.5px solid #e8b316;
          background-color: rgba(orange, 0.1);
          border-radius: 5px;
        }
        .title {
          display: flex;
          align-items: center;
          span {
            font-weight: 600;
            font-size: 15px;
          }
          .el-icon {
            margin-left: 3px;
          }
        }
        .money {
          .price {
            font-size: 36px;
            font-weight: 800;
          }
          .unit {
            margin-left: 10px;
            color: black;
          }
        }
        .dbzq {
          margin-top: 5px;
        }
        .pm {
          margin-top: 5px;
        }
        .el-icon {
          margin: 0 3px;
        }
        .db_color {
          color: red;
        }
      }
    }
    .picker_box {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      h5 {
        margin: 0;
        padding: 0;
        margin-right: 10px;
      }
      span {
        color: grey;
      }
    }

    .h5_font {
      margin: 0;
      font-weight: 600;
      font-size: 20px;
      margin-right: 10px;
      margin-bottom: 20px;
    }
  }
  .main_box-right {
    background-color: rgb(240, 240, 240);
    width: 5%;
    position: relative;
    display: flex;
    justify-content: end;
    align-items: center;
    .others {
      width: 80%;
      height: 250px;
      background-color: rgba(white, 0.9);
      display: flex;
      justify-content: space-around;
      align-items: center;

      .other_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2px 15px;

        &:hover {
          background-color: rgba(#666, 0.2);
          cursor: pointer;
        }
      }
    }
  }
}
.box-card:hover{
  border: 1px solid rgb(230, 216, 68);
 background-color: rgba(230, 216, 68,.1);
}
</style>
